<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-for="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue/vue.js"></script>
    <script src="../../js/jquery/jquery.js"></script>
</head>
<body>

<div id="app" >

    <!--vue事件被触发后，会创建事件对象并赋值给$event变量 名称不可变-->
    <ul>
        <li v-for="e in emps"/>
        {{e.id}}-{{e.name}}-{{e.age}}-{{e.sex==1?'男':'女'}}
    </ul>


</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            emps:[]
        },
        mounted:function () {
            //console.log(this,1);        //当前在创建的vue实例
            //console.log(vue,2)          //还未初始化完成，此刻的vue是空对象，undefined

            //定义一个vue对象的this
            var _this = this;

            //发送异步请求去获取数据，模拟获取数据
            $.get("/data/emps.json",function (data) {
                //通过对象.属性的方法，进行数据的初始化
                _this.emps=data;
            })
        }
    })
    //console.log(vue,3);     //创建完成后的vue对象
</script>
</body>
</html>